<template>
  <div class="mod-home">
    <!-- <h3>{{ $t("home.desc.title") }}</h3> -->
    <!-- <ul>
      <li v-for="item in list" :key="item" v-html="item"></li>
    </ul> -->
    <!-- <region v-model="l" /> -->
    <div class="home-page-leftBox">
      <!-- 左边第一个盒子 -->
      <div class="Total-number-of-files">
        <div class="Total-number-of-files-box" v-for="item in filesList" :key="item.id">
          <div style="width: 65%">
            <div class="files-title">{{ item.title }}</div>
            <div class="amount">{{ item.amount }}</div>
            <div class="files">{{ item.files }}</div>
          </div>
          <img :src="item.src" alt="" />
        </div>
      </div>
      <!-- 左边第二个盒子 -->
      <div class="common-function">
        <!-- <div> -->
        <div class="title">常用功能</div>
        <div style="display: flex; flex-wrap: wrap">
          <div class="function-box" v-for="funcitem in functionList" :key="funcitem.id" @click="navehate(funcitem.url)">
            <img :src="funcitem.src" alt="" />
            <div class="subTitle">{{ funcitem.subTitle }}</div>
          </div>
        </div>
        <!-- </div> -->
      </div>
      <!-- 左边第三个盒子 -->
      <div class="histogramBox">
        <div class="gaine">
          <div class="title">档案借阅</div>
          <div class="statistics">
            <div id="main" class="main"></div>
          </div>
        </div>
        <div class="gaine">
          <div class="title">个人工作年度统计</div>
          <div class="statistics">
            <div id="personageMain" class="main"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-page-rightBox">
      <!-- 右边第一个盒子 -->
      <div class="backlog">
        <div class="title">待办事项</div>
        <div class="backlog-box">
          <div class="matter" v-for="backlog in backlogList" :key="backlog.id">
            <div class="matter-left">
              <img :src="backlog.src" alt="" />
              <div style="margin-left: 10px">
                <div class="matter-subtitle">{{ backlog.matter }}</div>
                <div class="remind">{{ backlog.remind }}</div>
              </div>
            </div>
            <div class="matter-right">
              <el-badge :value="backlog.value" class="item"></el-badge>
              <img :src="backlog.img" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 右边第二个盒子 -->
      <div class="File-type">
        <div class="title">档案类型</div>
        <div class="pie">
          <div id="piemain" class="piemain"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.item {
  margin-top: 5px;
  margin-right: 8px;
}
.title {
  font-family: MicrosoftYaHeiSemibold;
  font-size: 16px;
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding-left: 21px;
  border-bottom: 3px solid rgb(245, 247, 249);
  color: #333333;
  letter-spacing: 0.63px;
  font-weight: 600;
}
.mod-home {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 5px;
}
.home-page-leftBox {
  width: 70%;
  height: 100%;
  min-height: 770px;
  margin-right: 20px;
  // border: 1px solid red;
  .Total-number-of-files {
    width: 100%;
    height: 16%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
    .Total-number-of-files-box {
      width: 23.6%;
      height: 100%;
      display: flex;
      // align-items: center;
      padding-top: 18px;
      background-color: #fff;
      border-radius: 6px;
      .files-title {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #a7afb5;
        padding-left: 18px;
        margin-top: 5px;
        border-left: 4px solid #007aff;
        letter-spacing: 0.56px;
        font-weight: 400;
      }
      .amount {
        font-family: MicrosoftYaHeiSemibold;
        font-size: 24px;
        color: #404549;
        padding-left: 21px;
        margin: 5px 0;
        letter-spacing: 0.95px;
        font-weight: 600;
      }
      .files {
        font-family: MicrosoftYaHeiSemibold;
        font-size: 13px;
        color: #999999;
        padding-left: 21px;
        letter-spacing: 0.52px;
        font-weight: 600;
      }
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
  .common-function {
    width: 100%;
    height: 34%;
    background-color: #fff;
    border-radius: 6px;
    margin: 20px 0;
    .title {
      border-bottom: none;
    }
    .function-box {
      width: 20%;
      height: 113px;
      display: flex;
      align-items: center;
      padding-left: 21px;
      border-top: 3px solid rgb(245, 247, 249);
      border-right: 3px solid rgb(245, 247, 249);
      img {
        width: 48px;
        height: 48px;
        margin-right: 15px;
      }
      .subtitle {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0.56px;
        font-weight: 400;
      }
    }
  }
  .histogramBox {
    width: 100%;
    height: 45.2%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
    .gaine {
      width: 49%;
      height: 100%;
      background-color: #fff;
      border-radius: 6px;
    }
    .statistics {
      width: 100%;
      height: 87%;
      .main {
        width: 100%;
        height: 100%;
        // border: 1px solid red;
      }
    }
  }
}
.home-page-rightBox {
  width: 30%;
  height: 100%;
  min-height: 770px;
  // border: 1px solid red;
  .backlog {
    width: 100%;
    height: 40%;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 6px;
    // border: 1px solid red;
    .matter {
      width: 90%;
      height: 100px;
      border-radius: 8px;
      margin: 24.3px;
      display: flex;
      background-image: linear-gradient(90deg, #f7fbff 0%, #eaf4ff 100%);
      .matter-left {
        width: 91%;
        margin-left: 16px;
        display: flex;
        align-items: center;
        img {
          width: 48px;
          height: 48px;
        }
        .matter-subtitle {
          font-family: MicrosoftYaHeiSemibold;
          font-size: 16px;
          color: #333333;
          letter-spacing: 0.63px;
          font-weight: 600;
        }
        .remind {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          color: #e93722;
          letter-spacing: 0.56px;
          font-weight: 400;
          margin-top: 4px;
        }
      }
      .matter-right {
        margin-right: 16px;
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
        }
      }
    }
  }
  .File-type {
    width: 100%;
    height: 57.7%;
    background-color: #fff;
    border-radius: 6px;
    // border: 1px solid red;
    .pie {
      width: 100%;
      height: 90%;
      // border: 1px solid red;
      .piemain {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

<script lang="ts">
import * as echarts from "echarts";
import { defineComponent, ref, reactive, toRefs } from "vue";
import useView from "@/hooks/useView";
import { useI18n } from "vue-i18n";
import baseService from "@/service/baseService";
export default defineComponent({
  // components: {

  // },
  setup() {
    // const random = () => {
    //   return Math.round(300 + Math.random() * 700) / 10;
    // };
    const state = reactive({
      filesList: [
        {
          id: 1,
          title: "档案总件数",
          amount: "298654",
          files: "案卷数：1289",
          src: "/img/icon-archives.png"
        },
        {
          id: 2,
          title: "借阅待归还数",
          amount: 0,
          src: "/img/icon-return.png"
        },
        {
          id: 3,
          title: "借阅超期",
          amount: 0,
          src: "/img/icon-bey.png"
        },
        {
          id: 4,
          title: "档案销毁数",
          amount: 0,
          src: "/img/icon-beyond.png"
        }
      ],
      functionList: [
        {
          id: 1,
          src: "/img/icon-收集整编.png",
          subTitle: "收集整编",
          url: ""
        },
        {
          id: 2,
          src: "/img/icon-档案利用.png",
          subTitle: "档案利用",
          url: "/archive/using-records"
        },
        {
          id: 3,
          src: "/img/icon-档案销毁.png",
          subTitle: "档案销毁",
          url: "/archive/destroy"
        },
        {
          id: 4,
          src: "/img/icon-档案鉴定.png",
          subTitle: "档案鉴定",
          url: "/archive/appraisal"
        },
        {
          id: 5,
          src: "/img/icon-库存管理.png",
          subTitle: "库存管理",
          url: "/warehouse/store"
        },
        {
          id: 6,
          src: "/img/icon-档案移交.png",
          subTitle: "档案移交",
          url: "/transfer/transfer"
        },
        {
          id: 7,
          src: "/img/icon-模拟库房.png",
          subTitle: "模拟库房",
          url: "/warehouse/imitate"
        },
        {
          id: 8,
          src: "/img/icon-ocr-identify.png",
          subTitle: "档案检索",
          url: "/warehouse/imitate"
        },
        {
          id: 9,
          src: "/img/icon-我的收藏.png",
          subTitle: "我的收藏",
          url: "/archive/collect"
        },
        {
          id: 10,
          src: "/img/icon-档案数据库.png",
          subTitle: "档案数据库",
          url: "/archive/collect"
        }
      ],
      backlogList: [
        { id: "1", src: "/img/icon-archives-library.png", matter: "档案借阅", remind: "到期提醒", value: 0, img: "./img/icon-right-default.png" },
        { id: "2", src: "/img/icon-file-using.png", matter: "保管期限", remind: "到期提醒", value: 4, img: "./img/icon-right-default.png" }
      ]
    });
    const { t } = useI18n();
    const l = ref([]);
    const list = ref(t("home.desc.list").split("\n"));
    return {
      ...useView(state),
      ...toRefs(state),
      list,
      l,
      // bar,
      theme: "",
      barLoadingOptions: {
        text: "Loading…",
        color: "#4ea397",
        maskColor: "rgba(255, 255, 255, 0.4)"
      },
      autoResize: true
    };
  },
  mounted() {
    this.setEchartData();
    this.setPersonageData();
    this.setPiedata();
  },
  created() {
    this.getFunctionList();
    this.getStatistics();
  },
  methods: {
    navehate(url) {
      this.$router.push({ path: url });
    },
    getFunctionList() {
      baseService.get(`/sys/sys-func/list`).then((res) => {
        console.log(res);
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        if (res.data.length < 10) {
          let filterList = this.functionList.filter((l) => {
            return res.data.findIndex((d) => d.subTitle === l.subTitle) == -1;
          });
          this.functionList = res.data.concat(filterList);
        } else {
          this.functionList = res.data;
        }
      });
    },
    getStatistics() {
      baseService.get(`/archive/home/statistics`).then((res) => {
        var dataMap = res.data;
        this.borrowOutTimeCount = dataMap.borrowOutTimeCount;
        this.destroyCount = dataMap.destroyCount;
        this.nearOutTimeCount = dataMap.nearOutTimeCount;
        this.waitForReturnCount = dataMap.waitForReturnCount;
        this.filesList.forEach((item) => {
          if (item.id === 1) {
            console.log(1);
          } else if (item.id === 2) {
            item.amount = dataMap.waitForReturnCount;
          } else if (item.id === 3) {
            item.amount = dataMap.borrowOutTimeCount;
          } else if (item.id === 4) {
            item.amount = dataMap.destroyCount;
          }
        });

        this.backlogList.forEach((item) => {
          if (item.id === "1") {
            item.value = dataMap.nearOutTimeCount;
          } else if (item.id === "2") {
            console.log(2);
          }
        });
        console.log(res);
      });
    },
    setEchartData() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        grid: {
          left: "4%",
          right: "4%",
          bottom: "4%",
          containLabel: true
        },
        color: [
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#31D291" }, //柱图渐变色
            { offset: 1, color: "#0FB974 " } //柱图渐变色
          ])
        ],
        xAxis: {
          type: "category",
          data: ["入库", "出库", "接收", "归档", "借阅"]
        },
        yAxis: {
          name: "单位：卷",
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
            barWidth: 24
          }
        ]
      };

      option && myChart.setOption(option);
    },
    setPersonageData() {
      var chartDom = document.getElementById("personageMain");
      var myChart = echarts.init(chartDom);
      var options;

      options = {
        grid: {
          left: "4%",
          right: "4%",
          bottom: "4%",
          containLabel: true
        },
        color: [
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#40A8FF" }, //柱图渐变色
            { offset: 1, color: "#007AFF" } //柱图渐变色
          ])
        ],
        xAxis: {
          type: "category",
          data: ["哈蓓保", "田荣", "红保", "士大夫", "姜文"]
        },
        yAxis: {
          name: "单位：分",
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
            barWidth: 24
          }
        ]
      };

      options && myChart.setOption(options);
    },
    setPiedata() {
      var chartDom = document.getElementById("piemain");
      var myChart = echarts.init(chartDom);
      var options;

      options = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          itemWidth: 10,
          icon: "circle",
          left: 400,
          bottom: 5
          // padding: [10, 10, 10, 10]
        },
        // legend: {
        //   left: "center",
        //   top: "bottom",
        //   data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6", "rose7", "rose8"]
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            // radius: [0],
            center: ["40%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 0
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 40, name: "文书档案 1" },
              { value: 33, name: "文书档案 2" },
              { value: 28, name: "文书档案 3" },
              { value: 22, name: "文书档案 4" },
              { value: 20, name: "文书档案 5" },
              { value: 15, name: "文书档案 6" },
              { value: 12, name: "文书档案 7" }
            ]
          }
        ]
      };

      options && myChart.setOption(options);
    }
  }
});
</script>
